import * as YvanUI from "yvan-ui-wotu"
import CustomData, {dataRaw} from "../widget/custom.data"
import CustomDict from '../widget/custom.dict'
import {SimpleImportView} from "../widget/SimpleImportView";

const React = YvanUI.React
const _ = YvanUI.lodash
const importExcel = YvanUI.importExcel
// @ts-ignore
const ImportExcelOption = YvanUI.ImportExcelOption
// @ts-ignore
const ImportResult = YvanUI.ImportResult

interface Ref {
    grid1: YvanUI.Grid
}

export default class GridFormatter extends YvanUI.Scope<void, Ref> {

    main = this.$$({
        check1: ''
    })

    onRender() {
        this.watch(()=>this.main.check1,
            (v)=> {
                this.refs.grid1.loading = (v === '1')
            });
    }

    importTest() {
        // @ts-ignore
        const option: ImportExcelOption = {
            fields: [
                {field: "customercode", title: '客户编号'},
                {
                    field: "customername", title: '客户名称', validate: ({field, ov, nv, rowIndex, data, rowDatas}) => {
                        if (ov === '西安 杨小卫') {
                            return field.title + ":" + "这个人不行"
                        }
                        return true
                    }
                },
                {field: "logogram", title: '助记码'},
                {field: "industryclass", title:'客户类型', data: CustomDict.industryclass},
                {
                    field: "customertype",
                    title: '客户类别',
                    data: this.$get(
                        () => new Promise((resolve, reject) => {
                            resolve(CustomDict.customertype)
                            // setTimeout(() => resolve(CustomDict.customertype), 1000)
                        })
                    )
                },
                {
                    field: "create_at",
                    title: "创建时间",
                    validate: ({field, ov, nv, rowIndex, data, rowDatas}) => {
                        return true
                    }
                },
                {
                    field: "update_at",
                    title: "更新时间",
                    validate: ({field, ov, nv, rowIndex, data, rowDatas}) => {
                        return true
                    }
                },
            ],

            // dataGridPageSize: 0,
            errorMsgGridPageSize: 0,
            dataStartRow: 3,
            titleRowNumber: 2,
            defaultShowData: "errorData",
            toolBar: [
                {
                    view: "button",
                    text: "按钮1"
                },
                {
                    view: "button",
                    text: "按钮1"
                },
                {
                    view: "button",
                    text: "按钮1"
                }
            ],
            rowValidate: (sender: any, {fields, data, rowIndex, rowDatas}) => {
                if (rowIndex % 3 === 0) {
                    return "校验错误"
                }
                return true
            },
            // @ts-ignore
            afterClientValidate: (sender: any, importResult: ImportResult, resolve: (value?: (ImportResult | PromiseLike<ImportResult> | undefined)) => void)=>{
                /** 在此处添加服务端逻辑 */
                // 调用 resolve 设置值到表格
                resolve(importResult)
            }
        }
        importExcel(option, this);
    }

    vjson = {
        view: 'page',
        title: '表格格式化',
        items: [
            {
                view: 'card',
                bodyStyle: {
                    padding: 0
                },
                items: [
                    {
                        view: 'button',
                        text: '刷新',
                        icon: 'fa fa-refresh',
                        onClick: () => {
                            this.refs.grid1.refresh()
                        }
                    },
                    {
                        view: 'button',
                        text: '导入',
                        icon: 'fa fa-refresh',
                        onClick: this.importTest
                    },
                    {
                        view: 'grid',
                        title: '表格格式化',
                        ref: 'grid1',
                        idField: "customerid",
                        exportExcelName: "表格导出.xlsx",
                        onExportExcelCellBgColor: (sender, cell: any, row: any, isTitle: boolean) =>{
                            if (cell.cellIndex%2===0 && isTitle) {
                                return 'FF00FF'
                            }
                            return '';
                        },
                        onBeforeExport:(sender, data)=>{
                            data.splice(0,0,[{v:'大标题1', f:['大标题1','大标题2'], F: 'A1'}, {v: '大标题2', F: "大标题1,大标题2"}, {v: '0', F: "大标题1,大标题2"}, {v: 0, F: "大标题1,大标题2"}, {v: '0', F: ["大标题1","大标题2"]}, {v: 0, F: ["大标题1","大标题2"]}, '大标题7', '大标题8',])
                            return data;
                        },
                        columns: [
                            {field: "customerid", hidden: true, needExport: true},
                            {field: "customercode", title: "客户编号", width: 80,},
                            {field: "customername", title: "客户名称", width: 120},
                            {field: "logogram", title: "助记码", width: 80,needExport: false},
                            {field: "industryclass", title: "客户类型", width: 100, data: CustomDict.industryclass},
                            {
                                field: "customertype", title: "客户类别", width: 100,
                                data: this.$get(
                                    () => new Promise((resolve, reject) => {
                                        resolve(CustomDict.customertype)
                                        // setTimeout(() => resolve(CustomDict.customertype), 2000)
                                    })
                                )
                            },
                            {field: "create_at", title: '创建时间', width: 120, formatter: 'fmtDate'},
                            {field: "update_at", title: '更新时间', width: 120, formatter: 'fmtDateNoTime'}
                        ],
                        autoDataSource: true,
                        dataSource: {
                            // func: ()=> this.importResult.allData
                            func: (p: any, isExportData: boolean) => new Promise(resolve => {
                                if (isExportData === true) {
                                    dataRaw.splice(0, 0, ['customerid', 'customercode', 'customername', 'logogram', 'industryclass', 'customertype', 'zip', 'contact', 'telephone', 'province', 'city', 'address', 'remark', 'create_at', 'update_at'])
                                    return resolve(dataRaw)
                                }
                                return resolve(CustomData)
                            })
                        },
                        onDataSourceAfter: (sender: YvanUI.Grid, dataOrgin: any[], raw: any, api: any, isExportData: boolean) => {
                            if (isExportData === true) {
                                return dataOrgin
                            }
                            const offset = (sender.currentPage - 1) * sender.pageSize
                            const endOffset = (offset + sender.pageSize > dataOrgin.length) ? dataOrgin.length : offset + sender.pageSize
                            return {
                                pagination: {
                                    current: sender.currentPage,
                                    total: dataOrgin.length,
                                    size: sender.pageSize
                                },
                                data: dataOrgin.slice(offset, endOffset)
                            }
                        }
                    }
                ]
            }
        ]
    }
}